<template>
    <a-skeleton :loading="loading">
        <div class="content">
            <TagList :type="$route.fullPath.includes('/games') ? 'games' : 'apps'" :list="list" />
            <HotList :list="categoryList[0]?.list" :name="categoryList[0]?.name" />
            <HotList :list="categoryList[1]?.list" :name="categoryList[1]?.name" />
            <AppItemList :show-item="9" :list="categoryList[2]?.list" :name="categoryList[2]?.name" />
            <HotList :list="categoryList[3]?.list" :name="categoryList[3]?.name" />
            <HotList :list="categoryList[4]?.list" :name="categoryList[4]?.name" />
        </div>
    </a-skeleton>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const list = ref([])
const categoryList = ref([])
const fiveCategoryList = ref([])
const loading = ref(false)
const route = useRoute()
function upperFirst(str) {
    str = str.toLowerCase()
    return str.replace(/\b\w|\s\w/g, fw => {
        return fw.toUpperCase()
    })
}

const loadData = async () => {
    loading.value = true
    const { data, error } = await useApi('/api/genre/getGenre', {
        method: "GET",
        params: {
            language: route.params.hasOwnProperty('language') ?  route.params.language : 'en'
        }
    })
    list.value = data.value.genre_list.filter(item => {
        return !item.genre_slug.includes('game-')
    })

    let arr = list.value.slice(0, 5)
    useApi('/api/genre/getAppBySlugList', {
        method: "GET",
        params: {
            language: route.params.hasOwnProperty('language') ?  route.params.language : 'en',
            genre_slug_list: arr.map(item => item.genre_slug).join(',')
        }
    }).then(({ data, error }) => {
        for (const key in data.value) {
            categoryList.value.push({
                name: upperFirst(key.replace(/game-/g, '').replace(/-/g, ' ')),
                list: data.value[key] == null ? [] : data.value[key]
            })
        }
        fiveCategoryList.value = data.value
        loading.value = false

    })
}
loadData()
const config = useRuntimeConfig();
useHead({
    title: "Download Free Android Apps (APK) | Safe & Latest Versions – APKDock",
    htmlAttrs: {
    lang: locale.value 
  },
    meta: [
        {
            name: 'robots',
            content: 'noindex,nofollow'
        },
        {
            name: 'description',
            content: computed(() => `Discover and download the best free Android apps in every category. Safe APK files, no Google account required, and always the latest versions – only on APKDock.`)
        }
    ],
    link: [
    {
      rel: 'canonical',
      href: computed(() => {
        return `${config.public.apiBase}${route.fullPath}`;
      })
    }
  ]
})
</script>
<style scoped lang="less">
.content {
    .tagList {
        margin: 24px 0;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
        overflow-x: auto;
        /* 添加水平滚动 */
        overflow-y: hidden;
        /* 隐藏垂直滚动 */
        flex-wrap: nowrap;
        /* 防止标签换行 */
        padding-bottom: 8px;

        /* 为滚动条留出空间 */
        &::-webkit-scrollbar {
            height: 0;
            /* 隐藏滚动条 */
            width: 0;
            background: transparent;
            /* 可选：背景透明 */
        }

        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;

        /* IE/Edge */
        .tag {
            flex-shrink: 0;
            /* 防止标签被压缩 */
            border-radius: 100px;
            border: 1px solid var(--Gray-200, #E5E6EA);
            background: #FFF;
            display: flex;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            min-width: fit-content;
            /* 确保标签有足够的宽度 */
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;

            .tagText {
                color: var(--Text-Text, #505662);
                font-family: Roboto;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
                /* 166.667% */
                text-transform: capitalize;
                white-space: nowrap;
                /* 防止文本换行 */
            }
        }
    }
}
</style>
